<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 影院
                </el-breadcrumb-item>
                <el-breadcrumb-item>影厅管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">

            <div>
                <div style="display: inline-block" v-show="flag2">
                输入影院名称:
                <el-input type="text" maxLength='6' v-model="query.cinemaName" @change="cinemaFindByName"
                          style="width: 100px"/>
                </div>
                &emsp;选择影院:
                <el-select placeholder="影院选择" v-model="query.cinemaId" @change="hallFindByCid"
                           class="handle-select mr10">
                    <el-option v-for="cinema in cinemas" :value="cinema.cinemaid"
                               :label="cinema.cinemaname"></el-option>
                </el-select>&nbsp;
                选择影厅:
                <el-select placeholder="影厅选择" v-model="cinemahallindex" @change="seatFindByHid"
                           class="handle-select mr10">
                    <el-option v-for="(cinemaHall,index) in cinemaHalls" :hall-rows="cinemaHall.cinemahallrow"
                               :value="index" :label="cinemaHall.cinemahallname"></el-option>
                </el-select>&nbsp;
            </div>
            <br>
            <br>
            <el-button round type="button" v-on:click="onSubmitseat" v-if="flag">确认修改</el-button>
            <br>
            <br>
            <div style="width: 100%;height: 100%">
    <span v-for="(item,index) in seats">
        <span class="seat" :seat-index="index" :data-status-id="item.seatstatus" v-on:click="zw($event)"
        ><img v-if="item.seatstatus==1" src="../../assets/img/baz.png"/>
            <img v-else-if="item.seatstatus==0" src="../../assets/img/www.png">
            <img v-else-if="item.seatstatus==2" src="../../assets/img/xz.png">
        </span>
        <span :class="(index+1)%columns==0?'huan':''"></span>
    </span>
                <br>
            </div>
        </div>

    </div>

</template>
<style type="text/css">
    .huan {
        display: block;
    }
</style>
<script>
    import imgb from "../../assets/img/xz.png";
    import imga from "../../assets/img/baz.png";

    export default {
        name: "seat",
        data() {
            return {
                query: {
                    cinemaName: '',
                    cinemaId: '',
                    cinemaHallId: '',
                    seats:[]
                },
                cinemahallindex: '',
                cinemas: [],
                cinemaHalls: [],
                flagq: true,
                seats: [],
                seat: [{
                    column: {},
                    row: {},
                    status: {},
                }],
                columns: 0,
                rows: 0,
                _this: '',
                count: '',
                flag: false,
                flag2: false,
                sum: 1,
                halltype: {},
            };
        },
        watch: {
            columns: function (o, n) {
                console.log(n)
                console.log(o)
            }
        },
        methods: {
            cinemaFindByName() {
                this.query.cinemaId = '';
                this.query.cinemaHallId = '';
                this.axios.get("/api/cinemaDTO/cinemaFindByName", {params: this.query}).then((data) => {
                    this.cinemas = data.data;
                })
            },
            hallFindByCid() {
                this.query.cinemaHallId = '';
                this.axios.get("/api/cinemaHall/cinemaHallFindByCid", {params: this.query}).then((data) => {
                    this.cinemaHalls = data.data;
                })
            },
            seatFindByHid() {
                this.query.cinemaHallId = this.cinemaHalls[this.cinemahallindex].cinemahallid
                this.columns = this.cinemaHalls[this.cinemahallindex].cinemahallcol
                this.rows = this.cinemaHalls[this.cinemahallindex].cinemahallrow
                this.axios.get("/api/cinemaHall/seatFindByHid", {params: this.query}).then((data) => {
                    this.seats = data.data
                    if (data.data != null&&!this.flag2) {
                        this.flag = true
                    }
                    console.log(this.seats)
                })
            },
            onSubmitseat() {
                if (this.query.seats.length==0){
                    alert("当前没有修改!")
                }else {
                    this.axios.post("/api/cinemaHall/updateSeat", this.query.seats).then((data) => {
                        if (data.data != 0) {
                            alert("修改成功")
                        } else {
                            "修改失败!"
                        }

                    })
                }
            },

            zw: function (objs) {
                if (!this.flag2){
                    let index = objs.currentTarget.getAttribute("seat-index")
                    let status = objs.currentTarget.getAttribute("data-status-id")
                    if (status == 1) {
                        this.query.seats[index]=this.seats[index];
                        this.seats[index].seatstatus = 2
                    } else if (status == 0) {
                        return;
                    } else if (status == 2) {
                        this.query.seats[index]=this.seats[index];
                        this.seats[index].seatstatus = 1
                    }
                }
            },
            ismaster(){
                    this.axios.get("/api/cinemaDTO/cinemaFindByMid",null).then((data)=>{
                        if (data.data.status==0){
                            this.flag2= true;
                        }else {
                            this.cinemas=data.data.cinema
                            console.log(data)
                        }
                    })

            }
        },
        created() {
            this.ismaster()
        }
    }
</script>


